<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= device-width, initial-scale=1, user-scalable=no"/>
    <title>图片放大缩小</title>
    <style></style>
    <script>
        window.onload = function (){
            document.documentElement.style.fontSize = document.documentElement.clientWidth/375*50+'px';
            window.onresize = function(){
                document.documentElement.style.fontSize = document.documentElement.clientWidth/375*50+'px';
            };
            class imgs{
                constructor(imgBoxSrc='1.jpg'){
                    this.imgBox = document.createElement('img');
                    this.imgBox.src = imgBoxSrc;
                    this.imgBox.style.height = '2rem';
                    this.imgBox.style.width = '2rem';
                    this.imgBox.id = 'imgId';
                    this.imgBox.className = 'yes';
                    this.onclickThat();
                }
                showThat(){
                    document.querySelector('body').appendChild(this.imgBox);
                }
                onclickThat(){
                    this.showThat();
                    document.querySelector('#imgId').addEventListener('click',()=>{
                      if(this.imgBox.className == 'yes'){
                        this.imgBox.style.height = parseInt(this.imgBox.style.height)*2 + 'rem';
                        this.imgBox.style.width = parseInt(this.imgBox.style.width)*2 + 'rem';
                        this.imgBox.className = 'no';
                      }else{
                        this.imgBox.style.height = '2rem';
                        this.imgBox.style.width = '2rem';
                        this.imgBox.className = 'yes';
                      }
                    },false);
                }

            }
            var thisImg = new imgs();
            thisImg.showThat();
        };
    </script>
</head>
<body>

</body>
</html>
